<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Baidu Map </title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=YKfag6fYSSQtiwSEoAe8AXmXMoDjJKBv"></script>
</head>
<body>
<input  type="button" value="查询'" οnclick="a()"/>

<div id="container"></div>
<script type="text/javascript">
    var map = new BMapGL.Map("container");          // 创建地图实例
    var point = new BMapGL.Point(115.5349318, 38.87790);  // 创建点坐标
    var point2 = new BMapGL.Point(115.522, 38.8766);  // 创建点坐标
    point.id = 10;
    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    // map.setHeading(64.5);   //设置地图旋转角度
    // map.setTilt(73);       //设置地图的倾斜角
    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
    map.addControl(cityCtrl);

    map.addEventListener('click', handleClick);
    function handleClick (e) {
        alert('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat);
        var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
        // alert('点的墨卡托坐标：' + mercator[0] + ', ' + mercator[1]);
    }
    // map.removeEventListener('click', handleClick);

    // 常见标注
    var marker = new BMapGL.Marker(point);
    var marker2 = new BMapGL.Marker(point2);
    marker.id = point.id
    map.addOverlay(marker);
    map.addOverlay(marker2);

    marker.addEventListener("click",function (){
        alert("你点击了标注");
        alert(this.id);
        var opts = {
            width:100,
            height:100,
            title:"hello"
        }
        var infoWindow = new BMapGL.InfoWindow("这里是北京公司", opts);
        map.openInfoWindow(infoWindow, map.getCenter())
        console.log(map.getCenter());
    })
    marker2.addEventListener("click",function (){
        alert("你点击了标注2");
        var opts = {
            width:100,
            height:100,
            title:"hello"
        }
        var infoWindow = new BMapGL.InfoWindow("这里是北京公司", opts);
        map.openInfoWindow(infoWindow, map.getCenter())
        console.log(map.getCenter());
    })
    // 画个圆
    var circle = new BMap.Circle(point, 30, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 }); //创建圆
    map.addOverlay(circle);
    function a() {

        map.clearOverlays();
        var result = BMapLib.GeoUtils.isPointInCircle(point1, circle);
        map.addOverlay(circle);
        if (result == true) {

            map.addOverlay(marker1);
        }
        var result1 = BMapLib.GeoUtils.isPointInCircle(point2, circle);
        if (result1 == true) {
            map.addOverlay(marker2);
        }
    }
</script>
</body>
</html>